<template>
  <div 
    ref="panelRef"
    class="h-full relative flex flex-col border-l border-[#323232] bg-[#252526] transition-[width] duration-200 ease-in-out"
    :style="{ width: isOpen ? `${panelWidth}px` : '0px' }"
  >
    <!-- 拖拽条 -->
    <div
      class="absolute -left-1 top-0 w-2 h-full cursor-col-resize z-50 hover:z-[100]"
      @mousedown.prevent="startResize"
    >
      <div class="absolute left-1/2 top-0 w-px h-full -translate-x-1/2 bg-[#323232] hover:bg-[#4EC9B0] hover:w-0.5 transition-all"></div>
    </div>

    <!-- 切换按钮 -->
    <button 
      @click="togglePanel"
      class="absolute -left-8 top-2 z-40 bg-[#252526] text-[#8E8E8E] p-1.5 rounded-l-md border border-[#323232] border-r-0 hover:text-[#4EC9B0] transition-colors"
    >
      <svg 
        class="w-4 h-4 transition-transform duration-200"
        :class="{ 'rotate-180': !isOpen }"
        fill="none" 
        stroke="currentColor" 
        viewBox="0 0 24 24"
      >
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
      </svg>
    </button>

    <!-- 内容区域 -->
    <div v-show="isOpen" class="h-full flex flex-col overflow-hidden">
      <!-- 标题栏和模型选择 -->
      <div class="flex items-center justify-between px-4 py-2.5 border-b border-[#323232] bg-[#2D2D2D]">
        <div class="flex items-center space-x-3">
          <div class="relative">
            <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-[#4EC9B0] via-[#3B9E8C] to-[#2D8074] flex items-center justify-center shadow-lg">
              <svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 
                  d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"
                />
              </svg>
            </div>
            <div class="absolute -top-1 -right-1 w-3 h-3 bg-[#4EC9B0] rounded-full border-2 border-[#252526] animate-pulse"></div>
          </div>
          <span class="text-[#CCCCCC] font-medium text-sm">AI Assistant</span>
        </div>
        
        <!-- 模型选择器 -->
        <select 
          v-model="selectedModel"
          class="bg-[#252526] text-[#CCCCCC] text-sm border border-[#323232] rounded-md px-3 py-1.5 focus:outline-none focus:border-[#4EC9B0] appearance-none cursor-pointer hover:bg-[#2A2D2E] transition-colors pr-8 min-w-[130px] shadow-sm"
        >
          <option value="inscode">InsCode AI</option>
          <option value="gpt4">GPT-4</option>
          <option value="gpt35">GPT-3.5</option>
          <option value="claude">Claude 3</option>
          <option value="gemini">Gemini Pro</option>
        </select>
      </div>

      <!-- 消息列表 -->
      <div class="flex-1 overflow-auto p-4 space-y-4 scrollbar-ide">
        <div v-for="(message, index) in messages" :key="index"
          class="flex flex-col space-y-1"
          :class="[message.type === 'user' ? 'items-end' : 'items-start']"
        >
          <div class="flex items-center space-x-2" :class="[message.type === 'user' ? 'flex-row-reverse space-x-reverse' : '']">
            <!-- 头像 -->
            <div 
              class="w-6 h-6 rounded-full flex items-center justify-center"
              :class="[message.type === 'user' ? 'bg-[#4EC9B0]' : 'bg-gradient-to-br from-[#4EC9B0] to-[#3B9E8C]']"
            >
              <span v-if="message.type === 'user'" class="text-xs text-white font-medium">You</span>
              <svg v-else class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                  d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
                />
              </svg>
            </div>
            
            <!-- 消息内容 -->
            <div 
              class="max-w-[85%] rounded-lg px-4 py-2 shadow-sm"
              :class="[
                message.type === 'user' 
                  ? 'bg-[#4EC9B0] text-white' 
                  : 'bg-[#2D2D2D] text-[#CCCCCC]'
              ]"
            >
              {{ message.content }}
            </div>
          </div>
        </div>
      </div>

      <!-- 输入区域 -->
      <div class="p-4 border-t border-[#323232]">
        <div class="relative">
          <input
            v-model="inputMessage"
            @keyup.enter="sendMessage"
            type="text"
            placeholder="Ask AI anything..."
            class="w-full bg-[#2D2D2D] text-[#CCCCCC] rounded-md pl-4 pr-12 py-2.5 border border-[#323232] focus:outline-none focus:border-[#4EC9B0] placeholder-[#666666]"
          >
          <button
            @click="sendMessage"
            class="absolute right-2 top-1/2 -translate-y-1/2 text-[#4EC9B0] hover:text-[#5EDAC0] transition-colors p-1.5"
          >
            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 状态管理
const isOpen = ref(true)
const panelWidth = ref(450)
const inputMessage = ref('')
const selectedModel = ref('inscode')
const panelRef = ref(null)
const isDragging = ref(false)
const startX = ref(0)
const startWidth = ref(0)
const minWidth = 380 // 最小宽度
const maxWidth = 800 // 最大宽度

const messages = ref([
  { type: 'ai', content: 'Hello! How can I help you today?' }
])

// 拖拽相关方法
const startResize = (e) => {
  e.preventDefault()
  isDragging.value = true
  startX.value = e.clientX
  startWidth.value = panelWidth.value
  
  window.addEventListener('mousemove', handleResize)
  window.addEventListener('mouseup', stopResize)
  document.body.classList.add('select-none')
  document.body.classList.add('cursor-col-resize')
}

const handleResize = (e) => {
  if (!isDragging.value) return
  const diff = e.clientX - startX.value  // 修正计算方向
  const newWidth = Math.min(Math.max(startWidth.value - diff, minWidth), maxWidth)
  panelWidth.value = newWidth
}

const stopResize = () => {
  isDragging.value = false
  window.removeEventListener('mousemove', handleResize)
  window.removeEventListener('mouseup', stopResize)
  document.body.classList.remove('select-none')
  document.body.classList.remove('cursor-col-resize')
}

// 面板切换
const togglePanel = () => {
  isOpen.value = !isOpen.value
}

const sendMessage = () => {
  if (!inputMessage.value.trim()) return

  messages.value.push({
    type: 'user',
    content: inputMessage.value
  })

  setTimeout(() => {
    messages.value.push({
      type: 'ai',
      content: `Using ${selectedModel.value}: This is a simulated AI response.`
    })
  }, 1000)

  inputMessage.value = ''
}

onMounted(() => {
  // 确保初始状态正确
  if (!isOpen.value) {
    panelWidth.value = 0
  }
})

onUnmounted(() => {
  window.removeEventListener('mousemove', handleResize)
  window.removeEventListener('mouseup', stopResize)
})
</script>

<style scoped>
/* 添加一些必要的样式 */
.ai-panel {
  height: 100%;
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width;
}

.ai-panel.dragging {
  transition: none;
}

/* 自定义下拉箭头 */
select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
}

/* 滚动条样式 */
.scrollbar-ide::-webkit-scrollbar {
  width: 8px;
}

.scrollbar-ide::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-ide::-webkit-scrollbar-thumb {
  background: #424242;
  border-radius: 4px;
}

.scrollbar-ide::-webkit-scrollbar-thumb:hover {
  background: #4F4F4F;
}
</style> 